<template>
  <div id="argainDetails">
    <!-- 砍价商品详情 -->

    <div>
      <!-- 引入轮播图 -->
      <wgyAloneSwiper autoplay :swiperList="swiperList"></wgyAloneSwiper>
      <!-- 左上角返回按钮 -->
      <div class="back-border" @click="back">
        <div id="back"><</div>
      </div>
      <!-- 描述部分 -->
      <div id="described">
        <ul>
          <li>{{ obj.basicInfo.name }}</li>
          <li>{{ obj.basicInfo.characteristic }}</li>
          <li>
            <span>低价￥{{ obj.basicInfo.pingtuanPrice }}</span>
            <span>原价￥{{ obj.basicInfo.minPrice }}</span>
            <span>库存{{ obj.basicInfo.stores }}</span>
          </li>
        </ul>
      </div>
      <!-- 商品介绍,商品评价 -->
      <div class="goods">
        <ul>
          <li :class="{ active: active === 0 }" @click="active0">商品介绍</li>
          <li :class="{ active: active === 1 }" @click="active1">商品评价</li>
        </ul>
      </div>
      <div id="introduce">
        <ul>
          <li id="introduce-li" v-show="active === 0" v-html="content"></li>
          <li v-show="active === 1">
            <div class="con" v-for="(item,i) in list" :key="i">
                <div class="con-left">
                <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3220589324,939421850&fm=26&gp=0.jpg" alt="">
                </div>
                <div class="con-right">
                    <p><span>{{item.user.nick}}</span>
                    <span class="red">{{item.goods.goodReputationStr}}</span></p>
                    <p class="p2">{{item.goods.goodReputationRemark}}</p>
                    <p class="p3">
                        <span class="time">{{item.goods.dateAdd}}</span>
                        <span class="format">{{item.goods.property}}</span>
                    </p>
                </div>
            </div>
            <br /><br /><br /><br />
          </li>
        </ul>
      </div>
    </div>

     <add-cart :detailsObj='detailsObj'></add-cart>
  </div>
</template>

<script>
import { getkanjia, getGoodsDetail, getReputation } from "../../utils/api/Home";
import wgyAloneSwiper from "@/components/type/wgy-Alone-Swiper/wgy-Alone-Swiper";
import addCart from '@/components/Cart/addCart/addCart'
export default {
  data() {
    return {
      obj: {
        basicInfo: {},
      },
      swiperList: [],
      active: 0,
      content: "",
      id: "",
      list:[],
      detailsObj:'',
    };
  },
  created() {
    // 获取点击的对象
    // console.log(this.$route.query.id);
    getGoodsDetail(this.$route.query.id).then((res) => {
      console.log(res);
      this.detailsObj = res
      
      this.id = this.$route.query.id;
      this.obj = res;
      this.content = res.content;

      // 得到轮播图的图片
      res.pics.forEach((item) => {
        this.swiperList.push(item.pic);
      });
    });
    // 获取详情数据的评价
    getReputation(this.$route.query.id).then((res) => {
      this.list = res.data
    });
  },
  methods: {
    // 点击左上角返回上一级
    back() {
      this.$router.go(-1);
    },
    // 点击商品介绍
    active0() {
      this.active = 0;
    },
    // 点击商品评价
    active1() {
      this.active = 1;
    },
  },
  //组件挂载
  components: {
    wgyAloneSwiper,
    addCart
  },
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped>
.back-border {
  width: 0.7rem;
  height: 0.7rem;
  position: absolute;
  border: 1px solid red;
  top: 0.3rem;
  border-radius: 50%;
  left: 0.3rem;
  #back {
    width: 0.6rem;
    margin: 0.025rem auto;
    text-align: center;
    color: #aaa;
    border-radius: 50%;
    font-size: 0.5rem;
    height: 0.6rem;
    background-color: #fff;
    border: 1px solid #aaa;
  }
}
#described {
  background-color: #fff;
  ul {
    width: 100%;
    height: 2rem;
    padding: 0 0.4rem;
    overflow: hidden;
    li {
      width: 100%;
      margin-top: 0.3rem;
      font-size: 0.26rem;

      color: #b8b8b8;
    }
    li:first-child {
      color: #464646;
      font-size: 0.3rem;
    }
    li:last-child {
      display: flex;
      justify-content: space-between;
      span:first-child {
        color: red;
      }
    }
  }
}
//  商品介绍
.goods {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.4rem;
  font-size: 0.3rem;
  background-color: #fff;

  ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    li {
      width: 50%;
      text-align: center;
      line-height: 0.8rem;
    }
  }
  .active {
    border-bottom: 1px solid red;
  }
}
#introduce {
  width: 100%;
  height: 100%;
  font-size: 0.3rem;
  background-color: #fff;
  /deep/ {
    #introduce-li {
      width: 100%;
      padding: 0 0.2rem;
      ul {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        li {
          width: 100%;
          margin: 0.2rem !important;
        }
      }
      p {
        img {
          width: 100% !important;
          height: auto !important;
        }
      }
    }
  }
  .con {
    width: 100%;
    height: 3rem;
    padding: .2rem;
    display: flex;
    border-bottom: 1px solid #464646;
    .con-left{
        width: 1.6rem;
        height: 100%;
         img{
            width: 100%;
            height: 1.2rem;
        }
    }
    .con-right{
        width: 5.6rem;
        height: 100%;
        :nth-child(1){
            margin: .2rem;

            .red{
            padding:.05rem .2rem;
            background-color: red;
            color: #fff;
        }
        }
        .p2,.p3{
            margin:  .3rem .2rem;

        }
        .p3{
            color: #ccc;
            display: flex;
            .time{
                width: 1.4rem;
                word-break: break-all;
                height: 1rem;
               
            }
            .format{
                margin-left: 1.2rem;
                width: 2rem;
                margin-top: .2rem;
                height: 1rem;
                word-break: break-all;
            }
        }
    }
  }
}

</style>
